---
import { toTitleCase } from "$/utils";
import { NAV_ITEMS } from "$/config";
---

<nav class="nav py-3">
  <ul class="nav-list dark:text-theme-dark-secondary" transition:animate="fade">
    {
      Object.keys(NAV_ITEMS).map((navItemKey) => (
        <li>
          <a
            class:list={[
              `pb-1 border-b-2 hover:border-gray-400 hover:dark:border-gray-700 `,
              Astro.url.pathname !== NAV_ITEMS[navItemKey].path
                ? "border-gray-100 dark:border-gray-800"
                : "",
              Astro.url.pathname === NAV_ITEMS[navItemKey].path
                ? "border-theme-primary"
                : "",
            ]}
            href={NAV_ITEMS[navItemKey].path}
            title={NAV_ITEMS[navItemKey].title}
          >
            {toTitleCase(NAV_ITEMS[navItemKey].title)}
          </a>
        </li>
      ))
    }
  </ul>
</nav>
<style>
  .nav-list {
    @apply inline-flex list-none gap-8 text-xl font-semibold text-theme-primary dark:text-theme-dark-primary py-2 flex-wrap;
  }
</style>
